<!DOCTYPE html>
<html>

<body class="bgf6">

	<div th:include="common/bookTop :: commonTop"></div>
	
	<div class="main-body pb100" id="app">
		<div class="container pt10">
			<div class="dflx sbt">
				<div class="body-left bgff">

					<div th:include="common/bookLeft :: commonLeft"></div>


				</div>
				
				<div class="body-right">
					<div class="bread-nav bgff">
						<ul class="dflx">
							
						</ul>
					</div>
					
					<div class="bgff mt10 pb20 edit-mode">
						<div class="wrap">

							<el-row>

								<el-col :span="8" v-for="book in books">
									<div class="grid-content bg-purple" @click="toBookDetal(book.commoId)">
										<el-card :body-style="{ padding: '0px' }">
											<img :src="book.pictureUrl" class="image">
											<div style="padding: 14px;">
												<span>{{book.commoName}}</span>
												<div class="bottom clearfix">
													<span>{{book.author}}</span>
													<el-button type="text" class="button">购买</el-button>
												</div>
											</div>
										</el-card>
									</div>
								</el-col>

							</el-row>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


<script type="text/javascript">

	var app = new Vue({
		el : '#app',
		data : {
			books : []
		},
		created : function() {
			this.loadHomeBook();
		},
		methods : {
			loadHomeBook : function () {
				let that = this;
				axios.get('/home/book')
						.then(function (response) {
							console.log(response);
							that.books = response.data.data;
						});
			},
			toBookDetal : function (bookId) {
				window.location.href = '/book/' + bookId + '.html';
			}
		}
	});

</script>
</body>
</html>
